<template>
    <p>
        <button @click="current--" :disabled="current <= 1">上一页></button>
        <button v-for="p in totalPage" :class="{ active: p === current }" @click="current = p">{{ p }}</button>
        <button @click="current++" :disabled="current >= totalPage">下一页></button>
        <select v-model.number="perpage">
            <option value="2">每页2条</option>
            <option value="4">每页4条</option>
            <option value="5">每页5条</option>
        </select>
    </p>
</template>

<script>
export default {
    data() {
        return {
            current: this.page,
            perpage: this.pageSize,
        }
    },
    props: {
        page: Number,
        pageSize: Number,
        total: Number,
    },
    computed: {
        totalPage() {
            return Math.ceil(this.total / this.perpage);
        }
    },
    watch: {
        current(val) {
            this.$emit('update:page', val);
        },
        perpage(val) {
            if (this.current >= this.totalPage) this.current = this.totalPage;
            this.$emit('update:pageSize', val);
        }
    },
}

</script>

<style>
.active{
    color: red;
}
</style>